<template>
  <div class="firstScreen" v-if="isShow" @click="closeScreen">
    <div class="content" :class="{close: isClose}">
      <div class="title">
        <h1>seyu's world</h1>
        <h1>瑟语的世界</h1>
      </div>
      <div class="btn">点击屏幕进入</div>
    </div>
  </div>
</template>

<script setup>
  import {ref} from "vue"

  //是否开始动画
  let isClose = ref(false)
  //是否隐藏
  let isShow = ref(true)
  //隐藏
  function closeScreen(){
    isClose.value = true
    setTimeout(()=>{
      isShow.value = false
    },1000)
  }
</script>

<style scoped>
 .firstScreen{
   width: 100%;
   height: 100%;
   position: fixed;
   top: 0;
   left: 0;
   overflow: hidden;
   z-index: 999;
 }
 .content{
   width: 100%;
   height: 100%;
   background-color: #444444;
   position: relative;
 }
 .content .title{
   width: 100%;
   position: absolute;
   top: 50%;
   transform: translateY(-100%);
   color: #ffffff;
 }
 .content .title h1{
   line-height: 1.5;
   white-space: normal;
   text-align: center;
   text-indent: -2.5em;
 }
 .content .title h1:last-child{
   text-indent: 2.5em;
 }
 .content .btn{
   width: 100%;
   position: absolute;
   bottom: 15%;
   color: #ffffff;
   text-align: center;
 }
 .close{
   animation: close 1s linear;
 }
 @keyframes close {
   0%{
     transform: rotate(0) scale(1);
     opacity: 1;
   }
   100%{
     transform: rotate(720deg) scale(5);
     opacity: 0;
   }
 }
</style>